<template>
  <div class="page-view">
    <!-- 分类部分 -->
    <!-- <div class="category-wrapper">
      <div class="industry-flex">
        <div
          v-for="industry in industryList"
          :key="industry.TypeCode"
          class="industry-item"
          :class="{'industry-item-active': industry.TypeCode === activeIndustry}"
          @click="selectedActiveIndustry(industry)"
        >
          {{ industry.label }}
        </div>
      </div>
      <div
        v-if="categoryList.length > 0"
        class="category-flex"
      >
        <div
          v-for="item in categoryList"
          :key="item.TypeCode"
          class="category-item"
          :class="{'category-item-active': item.TypeCode === activeCategory}"
          @click="selectedActiveCategory(item)"
        >
          {{ item.label }}
        </div>
      </div>
    </div> -->

    <div v-if="FreeCourseList.length > 0">
      <van-list
        v-model="loading"
        class="classList"
        :finished="finished"
        finished-text="— 没有更多了 —"
        @load="getFreeCourseList"
      >
        <freeExperience
          v-for="item in FreeCourseList"
          :key="item.value"
          :item="item"
        />
      </van-list>
    </div>
    <div
      v-else-if="FreeCourseList.length <= 0 && finished"
      class="no-data"
    >
      <img
        class="no-img"
        src="~assets/class/no_data.png"
        alt="暂无相关课程"
      >
      <span class="no-text">
        暂无相关课程
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    freeExperience: () => import('components/Home/FreeExperience.vue'),
  },
  data () {
    return {
      activeIndustry: '',
      activeCategory: '',
      categoryList: [] as any,
      industryList: [],
      FreeCourseList: [], // 免费课列表
      pageSize: 6,
      pageNum: 1,
      loading: true,
      finished: false,
    }
  },
  created () {
    // this.getCategory()
    this.getFreeCourseList()
  },
  methods: {
    getCategory () {
      this.$axios({
        url: 'Dictionary/GetCategoryList',
        method: 'get',
      }).then(res => {
        this.industryList = res
        this.selectedActiveIndustry()
      })
    },
    selectedActiveIndustry (industry?: any) {
      if (!industry) {
        industry = this.industryList[0]
      }
      this.activeIndustry = industry.id
      this.categoryList = industry.categoryList
      this.categoryList.length > 0 && this.selectedActiveCategory(this.categoryList[0])
    },
    selectedActiveCategory (category: any) {
      this.activeCategory = category.categoryId
      this.pageNum = 1
      this.getFreeCourseList()
    },
    // 获取免费课列表
    getFreeCourseList () {
      this.$axios({
        url: 'ytjysite/ECourse/GetFreeModelList',
        data: {
          PageIndex: this.pageNum,
          PageSize: this.pageSize,
        },
      }).then(res => {
        this.$set(this.$data, 'FreeCourseList',
          [...this.FreeCourseList, ...res.Items])
        this.loading = false

        if (this.pageNum * this.pageSize >= res.TotalCount) {
          this.finished = true
        } else {
          this.pageNum++
        }
        console.log('免费课班级', res)
      })
    },
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  min-height: 100%;
  background-color: #fff;
}
.category-wrapper {
  padding: 0 20px;
  .industry-flex {
    display: flex;
    justify-content: space-between;
  }
  .industry-item, .industry-item-active {
    margin-top: 10px;
    height: 66px;
    line-height: 66px;
    font-size: 32px;
    border-bottom: 1px solid #fff;
  }
  .industry-item-active {
    color: $primary-web;
    border-bottom: 1px solid $primary-web;
  }
  .category-flex {
    margin: 15px 0;
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
    overflow-x: scroll;
    .category-item, .category-item-active {
      text-align: center;
      min-width: 130px;
      padding: 0 15px;
      font-size: 28px;
      margin-right: 20px;
      height: 56px;
      line-height: 54px;
      border: 1px solid #eaeaea;
      border-radius: 25px;
    }
    .category-item-active {
      background: $primary-web;
      color: #fff;
      border: 1px solid $primary-web;
    }
  }
}
.classList {
  width: 700px;
  margin-left: 24px;
  padding-top: 40px;
}
.no-data{
  text-align: center;
  position: relative;
  top: 300px;
}
.no-img{
  width: 150px;
}
.no-text{
  display: block;
  text-align: center;
  font-size: 36px;
  color: #666666;
  margin-top: 10px;
}
</style>
